<template>
    <view>
        <nut-tabs class="tab" v-model="tabValue" swipeable size="large">
            <nut-tab-pane title="千语星球" pane-key="0">
                <view class="index">
                    <view>分享各种心情,思绪和秘密</view>
                    <view>遇见能听懂你喜怒哀乐的TA</view>
                    <nut-animate type="ripple" action="click">
                        <nut-animate type="float" :loop="true">
                            <image class="star" mode="aspectFill" :src="star1" />
                        </nut-animate>
                    </nut-animate>
                </view>
            </nut-tab-pane>
            <nut-tab-pane title="吐槽星球" pane-key="1">
                <view class="index">
                    <view>释放所有负能量</view>
                    <view>分享你的不快与忧愁</view>
                    <nut-animate type="ripple" action="click">
                        <nut-animate type="shake" :loop="true" duration="1000">
                            <image class="star" mode="aspectFill" :src="star2" />
                        </nut-animate>
                    </nut-animate>
                </view>
            </nut-tab-pane>
            <nut-tab-pane title="公主星球" pane-key="2">
                <view class="index">
                    <view>女性专属地带,所有男士免入🙅‍♀️</view>
                    <view>分享女性小秘密</view>
                    <nut-animate type="ripple" action="click">
                        <image class="star rotate" mode="aspectFill" :src="star3" />
                    </nut-animate>
                </view>
            </nut-tab-pane>
            <nut-tab-pane title="恋爱星球" pane-key="3">
                <view class="index">
                    <view>缘分天注定,七分靠打拼</view>
                    <view>在这里遇到同频的TA</view>
                    <nut-animate type="ripple" action="click">
                        <nut-animate type="jump" :loop="true">
                            <image class="star" mode="aspectFill" :src="star4" />
                        </nut-animate>
                    </nut-animate>
                </view>
            </nut-tab-pane>
        </nut-tabs>
    </view>
    <view class="btns">
        <nut-button type="info" size="mini" class="mail" @click="toBox('inbox')">
            <template #icon>
                <nut-icon :name="inbox"></nut-icon>
            </template>
            收件箱
        </nut-button>
        <nut-animate type="ripple" action="click">
            <nut-animate type="flicker" :loop="true">
                <nut-button type="primary" @click="onSearch">
                    <template #icon>
                        <nut-icon name="search"></nut-icon>
                    </template>
                    发现星球故事
                </nut-button>
            </nut-animate>
        </nut-animate>
        <nut-button type="info" size="mini" class="mail" @click="toBox('outbox')">
            <template #icon>
                <nut-icon :name="outbox"></nut-icon>
            </template>
            发件箱
        </nut-button>
    </view>
    <nut-tabbar bottom v-model="tabbarValue" @tab-switch="tabSwitch">
        <nut-tabbar-item tab-title="消息">
            <template #icon>
                <nut-icon name="message"></nut-icon>
            </template>
        </nut-tabbar-item>
        <nut-tabbar-item tab-title="" class="plus-image">
            <template #icon>
                <nut-icon :name="penImage" size="100" />
            </template>
        </nut-tabbar-item>
        <nut-tabbar-item tab-title="我的">
            <template #icon>
                <nut-icon name="my2"></nut-icon>
            </template>
        </nut-tabbar-item>
    </nut-tabbar>
</template>

<script>
    export default {
        data() {
            return {
                tabbarValue: 1,
                tabValue: 0,
                penImage: "/static/images/plus.png",
                star1: "/static/images/star1.png",
                star2: "/static/images/star2.png",
                star3: "/static/images/star3.png",
                star4: "/static/images/star4.png",
                inbox: "/static/images/inbox.png",
                outbox: "/static/images/outbox.png",
            }
        },
        onLoad() {},
        methods: {
            tabSwitch(item, index) {
                let s = this
                const tabUrl = ["/pages/message/message", "/pages/send/send", "/pages/my/my"];
                const url = tabUrl[index];
                uni.navigateTo({
                    url,
                    complete() {
                        s.tabbarValue = 1;
                    },
                });
            },
            onSearch() {
                uni.showToast({
                    title: "搜索中...",
                    icon: "loading",
                    duration: 2000,
                    mask: true,
                    success() {
                        console.log(1);
                    },
                })
            },
            toBox(name) {
                const url = `/pages/mailbox/mailbox?type=${name}`;
                uni.navigateTo({
                    url
                })
            },
        }
    }
</script>

<style lang="scss">
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .rotate {
        animation: spin 2s linear infinite;
    }

    .index {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        height: 70vh;
        width: 100%;
        overflow: hidden;
    }

    .tab {
        width: 100%;
    }

    .tab-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .star {
        width: 500rpx;
        height: 500rpx;
    }

    .btns {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 180rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: var(--nut-dark-color);
    }

    .desc {
        text-align: center;
    }

    .nut-tabbar-item_icon-box_icon .nut-icon__img {
        width: 75rpx;
        height: 75rpx;
    }
</style>